import React, { Component } from 'react';
import { HashRouter as Router, Switch, Route, NavLink } from 'react-router-dom' ;
import { connect } from 'react-redux';
import {addToCart} from '../actions/cart';

class HotSale extends Component {
    constructor(props, context) {
        super(props)
        this.state = {
            data: []
        }
      }
      addToCart(e,item){
          this.props.addToCart(item,()=>{

          });
      }
    getCate(){
        fetch("/api/products/list",{
            method:"POST",
            headers: {
                'Content-Type':'application/x-www-form-urlencoded'
              },
            body:"rows=8"
        }).then(res=>{
            return res.json();
          }).then((data) => {
              this.setState({
                data:data
              })
        })
    }
    componentDidMount(){
        this.getCate();
    }
    render() {
        console.log(this.state.data.rows);
        return (
            <div>
               <div className="beta-front-page-header hidden-xs" style={{marginTop: '1%', marginBottom: '1%'}}>
                        <b className="pantry-brown-title pantry-brown-title-pc">人气产品</b>
                    </div>
                    <div className="beta-front-page-header visible-xs" style={{marginTop: '2%', marginBottom: '2%'}}>
                        <b className="pantry-brown-title">人气产品</b>
                    </div>
                    <div className="col-md-12 col-sm-12 col-xs-12 city_page_popular">
                    {this.state.data.rows && this.state.data.rows.map(
                    (item,index) =>{
                        return  (
                        <div className="col-md-3 col-sm-3 hidden-xs city_page_popular_detail" key={index}>
                            <div className="col-md-12" style={{paddingLeft: '0',paddingRight: '0'}}>
                            <NavLink to={`/detail/${item._id}`} >
                                    <img alt={item.title} className="img-responsive" src={item.img} title={item.title}/>
                               </NavLink>
                            <div className="col-md-7" style={{padding: '0'}}>
                                <NavLink to={`/detail/${item._id}`} className="city-popular-font city-popular-pc-font pc-size-box pc-size-box-1">
                                    <span style={{padding: '0'}}>{item.title}</span>
                                </NavLink>
                            </div>
                            <div className="col-md-5" style={{padding: '0'}}>
                                <span className="city-popular-chart-font city-popular-pc-font"  href="javascript:;"  onClick={(e) => this.addToCart(e,item)}  >加入购物车 &gt;</span>
                            </div>
                            <div className="col-md-12 city-popular-size-font city-popular-size-font-pc">礼盒  ￥{item.price}</div>
                            </div>
                        </div>)
                    }
                )}
                </div>
            </div>
        );
    }
}
const getValue =state=>{
	return {
   
  }
}

const HotSaleContext = connect(getValue,{addToCart})(HotSale);

export default HotSaleContext;
